@page
@model zzzz.Xncf.EpidemicManagement.Areas.Admin.Pages.Street.Index

@{
    ViewData["Title"] = "街道管理首页";
    Layout = "_Layout_Vue";
}

@section breadcrumbs{
    <el-breadcrumb-item>COVIN-19</el-breadcrumb-item>
    <el-breadcrumb-item>街道管理</el-breadcrumb-item>
    <el-breadcrumb-item>首页</el-breadcrumb-item>
}

<div id="app">
    <el-container>
        <el-header class="module-header">
            <span class="start-title"> <i class="fa fa-dot-circle-o"></i>&nbsp;<span class="module-header-v">街道管理 - 首页</span></span>
        </el-header>
        
        <el-main>
            <el-table :data="tableData" border style="width: 100%">
                <el-table-column align="center" label="省份"><template slot-scope="scope">{{scope.row.province}}</template></el-table-column>
                <el-table-column align="center" label="市"><template slot-scope="scope">{{scope.row.city}}</template></el-table-column>
                <el-table-column align="center" label="区"><template slot-scope="scope">{{scope.row.district}}</template></el-table-column>
                <el-table-column align="center" label="街道"><template slot-scope="scope">{{scope.row.name}}</template></el-table-column>
            </el-table>
        </el-main>
    </el-container>
</div>


@section scripts{
    <script>
        new Vue({
            el: "#app",
            data() {
                return {
                    paginationQuery: {
                        total: 5
                    },
                    listQuery: {
                        pageIndex: 1,
                        pageSize: 20,
                        roleName: '',
                        orderField: ''
                    },
                    tableData: []
                };
            },
            created: function () {
                this.getList();
            },
            methods: {
                getList() {
                    let { pageIndex, pageSize, roleName, orderField } = this.listQuery;
                    service.get(`/Admin/Street/Index?handler=List`).then(res => {
                        this.tableData = res.data.data.data;
                        this.paginationQuery.total = res.data.data.totalCount;
                    });
                }
            }
        });
    </script>
}